<template>
	<view class="wrap">
		<view class="fc-33 fs-32 pad-top-30">住客评价</view>
		<view class="so-wap">
			<view class="evalu-main">
				<view class="flex em-o1">
					<view class="fs-36 fc-84 mar-right-10">4.7<text class="fs-26 fc-33">分很好</text></view>
					<text class="mar-right-10 fs-24 fc-66 lin">共540条</text>
					<view class="jtnr">									
						<text class="fs-24 fc-33">卫生4.7 环境4.7 服务4.8 设施4.7</text>
					</view>
				</view>
				<view class="flex tags-wap"> 
					<view class="tags fs-24">环境优美（128）</view>
					<view class="tags fs-24">环境优美（128）</view>
					<view class="tags fs-24">环境优美（128）</view>
				</view>
				<view class="ev-info">
					<view class="ev-info-l flex">
						<view class="user-img">
							<image src="https://web.suqzp.com/public/static/2.jpg"></image>
						</view>
						<text class="fc-33 fs-32 mar-left-30">小心</text>
					</view>
					<view class="ev-title fs-26 fc-33">出差或者旅游首选，性价比非常高的酒店，设施完善，房间干净卫生!前台小姐姐帅哥热情有礼出差或者旅游首选，性价比非常高的酒店，设施完善，房间干净卫生!前台小姐姐帅哥热情有礼出差或者旅游首选，性价比非常高的酒店，设施完善，房间干净卫生!前台小姐姐帅哥热情有礼</view>
				</view>
			</view>			
		</view>
	</view>
</template>
<script>	
	export default {		
		data() {
			return {
				commentlist:{
					content:'',//评价内容
					deviceStar:'',//设施评价星数：0->5
					goodCount:'',//点赞数
					hygieneStar:'',//卫生评价数
					locationStar:'',//位置评价星数
					pics:'',//上传图片地址，以逗号隔开。最多5张
					productName:'',//评价的产品名称
					readCount:'',//阅读数
					replayCount:'',//回复数
					serviceStar:'',//服务评价星数
					userIcon:'',//评价的用户头像
					userNickname:'',//评价的用户昵称
				}
				
			};
		},
		onLoad() {
			
		},
		mounted() {		
			this.getCommentlList()
		},
		methods: {
			//获取评价列表
			async getCommentlList() {
				var that = this
				let param = {page: 1,limit: 12};
				var res = await this.$apis.getCommentlList(param);
				console.log(res)
				if(res){
					for(var i=0;i<res.rows.length;i++){
						res.rows[i].content = that.formatRichText(res.rows[i].content)	
					}
					that.CommentlList = res.rows
				}
			},
			//富文本编译修改
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi,
						'width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi, '<img  class="img" ');
				newContent = newContent.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
					.replace(/<p>/ig, '<p class="u-css-clss">')
				return newContent;
			},
		}
	}
</script>
<style lang="scss">
	page{
		background: #f5f5f5;
		.wrap{
			padding-bottom: 40rpx;
			.so-wap{				
			
				/* 评价 */
				.evalu-main{
					.em-o1{
						line-height: 60rpx;
						.jtnr{
							position: relative;								
						}							
					}
					.tags-wap{
						margin: 15rpx 0;
						.tags{
							min-width: 118rpx;
							height:36rpx;
							background: #F0F8FE;
							margin-right: 26rpx;
							text-align: center;
							line-height: 36rpx;
							color: #5C9DD6;
						}
					}
					.ev-info{
						margin-top: 30rpx;
						.ev-info-l{
							.user-img{
								width: 48rpx;
								height: 48rpx;
								display: flex;
								align-items: center;
								overflow: hidden;
								position: relative;
								border-radius: 50%;
								image{
									width: 100%;
									border-radius: 50%;
								}
							}
						}
						.ev-title{
							padding-top: 10rpx;
							line-height: 43rpx;
							word-break: break-all;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 4;
							-webkit-box-orient: vertical;
						}
					}
					.notice-main{
						
					}
				}
			}
		}
	}
</style>
